<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实验室人员前台管理系统</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .clearfix::before,
        .clearfix::after{
            content: '';
           display: table;      
        }
        .clearfix::after{
            clear: both;
        }
       body {
            background-image: url(./8860603b42c0687.jpg);
            background-size: cover;
        } 
        /*容器  指定为弹性布局*/
        .container{
            display: flex;
            width: 100%;/*铺满父级元素*/
             height: 100vh;/*铺满当前屏幕*/
        }
        .login{
            margin:  auto;
            text-align: center;
            width: 600px;
            height: 400px;
            
        }
        h2{color:#fff;
            margin-bottom: 20px;
             font-size: 40px 宋体;
            border-bottom: 1px solid #fff;
            }
            .login button {
                border: 0;
            }
            .login button:hover{
                color: #2266f9;
                border-bottom: 2px solid #2266f9;
            }
    </style>
</head>
<body>
  <div class="container">
    <div class="login">
        <h2>实验室身份认证</h2>
        <div class="enter">
            <span></span>
            <input type="text"  placeholder="请输入用户名">
        </div>
        <div class="enter">
            <span></span>
            <input type="password" placeholder="请输入密码">
        </div>
        <button type="submit">确认提交</button>
        <button type="reset"  >重置</button>
    </div>
  </div>
</body>
</html>